/**
 * Route 渲染组件的三种方式
 *  1. component 方式
 *    <Route to="/home" component={Home} />
 *  2. render 方式
 *    <Route to="/home" render={(props) => ReactNode} />
 *
 *    1. render 是一个渲染函数的模式
 *    2. 函数会接受到一个包含有 history、location、match 属性的一个对象
 *    3. 这时渲染出去的 ReactNode 不会自动收到路由相关的三个 prop, 如果需要的化，可以手动传递下去
 *  3. children 方式
 *    <Route to="/home" >
 *      <One />
 *    </Route>
 *
 *    <Route to="/home">
 *      {
 *        (props) => <XXX {...props} />
 *      }
 *    </Route>
 *
 * 普通组件中如果需要获取到 路由相关的三个 prop 。应该如何处理？
 *    使用 withRouter 高阶组件，将普通组件给高阶一下
 *
 *        withRouter(UI组件)
 *        这时 UI组件 内就可以获取到 路由相关的三个prop了，
 */

import { Component } from "react";
import { Route, Link, Switch, Redirect } from "react-router-dom";

import Menu from "./components/Menu";
import Home from "./views/Home";
import About from "./views/About";
import One from "./views/One";

export default class App extends Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <hr />
        <div className="container">
          <div className="left">
            <Link to="/home">GoHome</Link>
            <br />
            <Link to="/about">GoAbout</Link>

            <Menu />
          </div>
          <div className="right">
            <Switch>
              <Route path="/home" component={Home} />

              <Route
                path="/about"
                render={(props) => {
                  console.log("props", props);
                  return <About {...props} />;
                }}
              />

              <Route path="/one">{(props) => <One {...props} />}</Route>
            </Switch>
          </div>
        </div>
      </div>
    );
  }
}
